import { Image, View } from "@tarojs/components";
import { TaskOrderDto } from "@/apis/__generated/model/dto";
import dayjs from "dayjs";
import { Dictionaries } from "@/apis/__generated/model/enums/DictConstants";
import localIcon from "@/assets/icons/location.png";
import editorIcon from "@/assets/icons/edit.png";
import weightIcon from "@/assets/icons/weight.png";
import boxIcon from "@/assets/icons/box.png";
import timeIcon from "@/assets/icons/time.png";
import mountedIcon from "@/assets/icons/mounted.png";
import React from "react";
import "./order-row.scss";

export default function OrderRow({
  order,
  buttons,
  bottom,
}: {
  order: TaskOrderDto["TaskOrderRepository/COMPLEX_FETCHER_FOR_FRONT"];
  bottom?: React.JSX.Element;
  buttons?: React.JSX.Element[];
}) {
  return (
    <View className="order-row">
      <View className="time-status">
        <View className="time">
          {dayjs(order.createdTime).format("YYYY-MM-DD HH:mm")}
        </View>
        <View className="status">
          {Dictionaries.TaskOrderStatus[order.status].keyName}
        </View>
      </View>
      <View className="info">
        <View className="row">
          <Image className="icon" src={localIcon}></Image>
          <View className="value">{order.sourceAddress.details}</View>
        </View>
        <View className="row">
          <Image className="icon" src={localIcon}></Image>
          <View className="value">{order.targetAddress.details}</View>
        </View>
        <View className="row">
          <Image className="icon" src={mountedIcon}></Image>
          <View className="value">
            {Dictionaries.TaskType[order.type].keyName}
          </View>
        </View>
        <View className="row">
          <Image className="icon" src={boxIcon}></Image>
          <View className="value">
            {Dictionaries.GoodsType[order.goodsType].keyName}
          </View>
        </View>
        <View className="row">
          <Image className="icon" src={timeIcon}></Image>
          <View className="value">{order.startTime}</View>
        </View>
        <View className="row">
          <Image className="icon" src={weightIcon}></Image>
          <View className="value">{order.weight}KG</View>
        </View>
        <View className="row">
          <Image className="icon" src={editorIcon}></Image>
          <View className="value">{order.baseOrder.remark}</View>
        </View>
      </View>
      <View className="price">￥：{order.baseOrder.payment.payAmount}</View>
      {bottom}
      <View className="buttons">{buttons}</View>
    </View>
  );
}
